import {Col, Divider, Grid, Row, Tag} from "antd";

const {useBreakpoint} = Grid
function CcGrid(){

    var screens = useBreakpoint();

    return (
        <div>
          {/*<Row gutter={{*/}
          {/*    xs:8,sm:16,md:24,lg:32*/}
          {/*}}>*/}
          {/*    <Col span={6} offset={6} push={6}>*/}
          {/*        <div style={{border:"1px solid red"}} >col</div>*/}
          {/*    </Col>*/}
          {/*    <Col span={6} pull={18}>*/}
          {/*        <div style={{border:"1px solid red"}}>col</div>*/}
          {/*    </Col>*/}
          {/*    <Col span={6}>*/}
          {/*        <div style={{border:"1px solid red"}}>col</div>*/}
          {/*    </Col>*/}
          {/*    <Col span={6}>*/}
          {/*        <div style={{border:"1px solid red"}}>col</div>*/}
          {/*    </Col>*/}
          {/*</Row>*/}


                <Row>
                    <Col span={18} push={6}>
                        <div style={{border: "1px solid red"}}>col</div>
                    </Col>
                    <Col span={6} pull={18}>
                        <div style={{border: "1px solid red"}}>col</div>
                    </Col>
                </Row>

            <Row>
                <Col span={18} >
                    <div style={{border: "1px solid red"}}>col</div>
                </Col>
                <Col span={6}>
                    <div style={{border: "1px solid red"}}>col</div>
                </Col>
            </Row>

            <Row justify="space-between" align={"middle"}>
                <Col  order={4} xs={{order:1}} lg={{order:4}} flex="100px">
                    <div style={{border: "1px solid red"}}>col</div>
                </Col>
                <Col  order={1} xs={{order:4}} lg={{order:1}} flex="auto">
                    <div style={{border: "1px solid red"}} >col222</div>
                </Col>
            </Row>

            <Row>
                <Col flex="1 1 200px">1 1 200px</Col>
                <Col flex="0 1 300px">0 1 300px</Col>
            </Row>


            {
                Object.entries(screens).filter(screen=>{
                    console.log(screen,"screen")
                    return screen[1]
                }).map(screen=>(
                    <Tag color="blue" key={screen[0]}>{screen[0]}</Tag>
                ))
            }

        </div>
    )
}

export default CcGrid
